<template>
	<div>
		<el-form label-width="100px">
			<el-form-item :label="$t('runninglog.form_label')">
				<div class="flex">
					<el-input v-model="lines">
						<template #suffix>{{ $t("runninglog.unit") }}</template>
					</el-input>
					<el-button type="" @click="feachList">{{ $t("runninglog.btn.query") }}</el-button>
				</div>
			</el-form-item>
		</el-form>
		<el-scrollbar native ref="scrollbarRef" style="height: calc(100vh - 420px); background-color: #002240">
			<div class="logger-table">
				<div v-for="(item, index) in dataList" :key="index">{{ item.content }}</div>
			</div>
		</el-scrollbar>
	</div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { getAppServiceLog } from "@/api/modules/applet/userApplet";
const scrollbarRef = ref();
const lines = ref<number>(500);
const dataList: any = ref<any>([]);
const route = useRoute();
const props = defineProps({
	id: String,
	instanceId: String
});

onMounted(() => {
	feachList();
});
const inputSlider = (value: number) => {
	console.log(value);
	scrollbarRef.value.setScrollTop(value);
};
const feachList = async () => {
	try {
		let parma: any = {};
		if (props.instanceId) {
			parma.instanceId = props.instanceId;
		} else if (props.id) {
			parma.id = props.id;
		} else {
			return;
		}
		if (!Object.keys(parma).length) {
			parma.instanceId = route.query.sn as string;
		}
		let { result } = await getAppServiceLog({ ...parma, lines: lines.value });
		if (result) {
			let arr: Array<string> = result as [];
			dataList.value = [];
			if (arr.length == 1) {
				arr[0].split("\n").forEach(log => {
					dataList.value.push({ content: log.replaceAll("\u0000", "").replaceAll("\u0001", "") });
				});
			} else {
				arr.forEach(log => {
					dataList.value.push({ content: log.replaceAll("\u0000", "").replaceAll("\u0001", "") });
				});
			}
		}
		dataList.value.push({ content: "" });
		dataList.value.push({ content: "" });
		dataList.value.push({ content: "" });
		nextTick(() => {
			let end = (document.querySelector(".logger-table") as HTMLElement).offsetHeight - 50;
			inputSlider(end);
		});
	} catch (e) {
		dataList.value = [];
	}
};
</script>

<style lang="scss">
.logger-table {
	padding-left: 10px;
	font-size: 12px;
	line-height: 24px;
	color: #ffffff;
	> div {
		min-height: 15px;
	}
}
</style>
